<template>
  <ElButton v-bind="mergeProps(props, $attrs)">
    <!-- 使用我们自定义的 icon prop（用于 SvgIcon） -->
    <template #icon v-if="props.svgIcon">
      <SvgIcon :name="props.svgIcon" />
    </template>

    <!-- 保留 Element Plus 原生 icon 属性的插槽 -->
    <template #icon v-else-if="$attrs.icon">
      <component :is="$attrs.icon" />
    </template>

    <!-- 其他插槽 -->
    <template v-for="(_, name) in $slots" #[name]="scope" :key="name">
      <slot :name v-bind="scope || {}"></slot>
    </template>
  </ElButton>
</template>

<script setup lang="ts">
defineOptions({ name: 'EpButton' })
import { mergeProps } from 'vue'
import { ElButton } from 'element-plus'
import type { buttonProps } from 'element-plus'
import type { ExtractPublicPropTypes } from 'vue'

// 解决插槽无类型提示的问题
type ButtonSlots = InstanceType<typeof ElButton>['$slots']
defineSlots<ButtonSlots>()

// 解决传参无类型提示的问题
type ButtonProps = ExtractPublicPropTypes<typeof buttonProps> & {
  svgIcon?: string // 建议加可选符，避免父组件必须传
}
const props = withDefaults(defineProps<ButtonProps>(), {})
</script>

<style lang="scss" scoped></style>
